<template>
    <div class="app-container">
        <el-card class="filter-container" shadow="never">
            <div>
                <el-row>
                    <i class="el-icon-search"></i>
                    <span>筛选搜索</span>
                </el-row>
                <el-row style="margin-top:12px;">
                    <el-input
                        style="width:400px;"
                        clearable
                        placeholder="团长名称／社区店名称"
                        v-model="listQuery.queryCondition"
                    >
                    </el-input>
                    <el-date-picker
                        v-model="listQuery.times"
                        style="margin-left: 10px;"
                        align="right"
                        type="datetimerange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                    >
                    </el-date-picker>
                    <el-button style="margin-left: 10px;" @click="getWithdrawList" type="primary">
                        查询
                    </el-button>
                    <el-button @click="handleResetCaptainSearch">
                        重置
                    </el-button>
                </el-row>
            </div>
        </el-card>

        <div class="table-container">
            <el-row style="margin-bottom: 10px">
                <el-radio-group v-model="listQuery.status" @change="getWithdrawList">
                    <el-radio-button :label="null">全部</el-radio-button>
                    <el-radio-button label="APPLIED">申请提现中</el-radio-button>
                    <el-radio-button label="AGREED">提现成功</el-radio-button>
                    <el-radio-button label="REJECTED">提现失败</el-radio-button>
                </el-radio-group>
            </el-row>
            <el-table
                ref="captainListTable"
                :data="captainDataList"
                style="width: 100%; "
                v-loading="listLoading"
                border
            >
                <el-table-column label="提现单号" align="center">
                    <template slot-scope="scope">{{ scope.row.withdrawId }}</template>
                </el-table-column>
                <el-table-column label="团长信息" align="center">
                    <template slot-scope="scope">
                        <div>{{ scope.row.headName }}</div>
                        <div>{{ scope.row.phoneNo }}</div>
                    </template>
                </el-table-column>
                <el-table-column label="社区店名称" align="center">
                    <template slot-scope="scope">{{ scope.row.communityName }}</template>
                </el-table-column>
                <el-table-column label="账户余额" align="center">
                    <template slot-scope="scope">{{ scope.row.withdrawable }}</template>
                </el-table-column>
                <el-table-column label="提现金额" align="center">
                    <template slot-scope="scope">{{ scope.row.amount }}</template>
                </el-table-column>
                <el-table-column label="申请时间" align="center">
                    <template slot-scope="scope">{{ scope.row.createTime }}</template>
                </el-table-column>
                <el-table-column label="审核时间" align="center">
                    <template slot-scope="scope">{{ scope.row.auditTime }}</template>
                </el-table-column>
                <el-table-column label="状态" width="120" align="center">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.status === 'AGREED'" type="success"
                            >提现通过</el-tag
                        >
                        <el-tag v-if="scope.row.status === 'REJECTED'" type="danger"
                            >提现失败</el-tag
                        >
                        <el-button
                            v-if="scope.row.status === 'APPLIED'"
                            size="mini"
                            type="primary"
                            @click="handleDealWithdraw(scope.row.withdrawId)"
                            >处理提现</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="pagination-container">
            <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                layout="total, sizes,prev, pager, next,jumper"
                :page-size="listQuery.pageSize"
                :page-sizes="[5, 10, 15]"
                :current-page.sync="listQuery.pageNum"
                :total="total"
            >
            </el-pagination>
        </div>
    </div>
</template>
<script>
import { getCaptainWithdrawList } from '@/api/captain';

const defaultListQuery = {
    pageNum: 1,
    pageSize: 5,
    status: null,
    queryCondition: '',
    times: []
};
export default {
    name: 'productList',
    data() {
        return {
            captainDataList: [],
            listLoading: false,
            listQuery: Object.assign({}, defaultListQuery),
            total: null
        };
    },
    created() {
        this.getWithdrawList();
    },
    watch: {},
    filters: {},
    methods: {
        handleResetCaptainSearch() {
            this.listQuery = Object.assign({}, defaultListQuery);
            this.getWithdrawList();
        },
        getWithdrawList() {
            this.listLoading = true;
            getCaptainWithdrawList(this.listQuery).then(res => {
                this.listLoading = false;
                if (res.data.success && Array.isArray(res.data.data)) {
                    this.captainDataList = res.data.data;
                    this.total = res.data.extra.total;
                } else {
                    this.captainDataList = [];
                    this.total = 0;
                }
            });
        },
        handleDealWithdraw(id) {
            this.$router.push({
                name: 'withdrawDeal',
                params: {
                    id
                }
            });
        },
        handleSizeChange(val) {
            this.listQuery.pageNum = 1;
            this.listQuery.pageSize = val;
            this.getWithdrawList();
        },
        handleCurrentChange(val) {
            this.listQuery.pageNum = val;
            this.getWithdrawList();
        }
    }
};
</script>
<style scoped lang="scss">
.el-radio-button {
    /deep/ .el-radio-button__inner {
        width: 130px;
    }
}
</style>
